
.dam-screen{
    flex-direction: column;
    .dam-body{
        display: flex;
        width: 100vw;
        height: ~'calc(100vh - 90px)';
        flex: 1;
        .dam-aside{
            width: 250px;
            padding: 20px;
            height: 100%;
            border-right: 1px solid @garyA300;
            overflow: auto;
            .dam-search{
                margin-bottom: 10px;
                border-bottom: 1px solid @garyA300;
                padding-bottom: 10px;
                .dam-search{
                    cursor: pointer;
                }
            }
            .dam-checkbox-group {
                margin-bottom: 25px;
                // border-bottom: 1px solid @garyA300;
                // padding-bottom: 10px;
                .group-header{
                    margin-bottom: 10px;
                    font-weight: bold;
                }
                .group-body{
                    padding-left: 5px;
                    .checkbox-num{
                        padding-left: 10px;
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        .num-txt{
                            background: #777;
                            color: #fff;
                            padding: 1px 10px;
                            border-radius: 20px;
                            display: inline-block;
                        }
                    }
                }
                /deep/ .ivu-checkbox-group-item {
                    display: block;
                    margin-bottom: 10px;
                    display: flex;
                }
            }
            // 文件数
            .files-tree{
                .group-header{
                    margin-bottom: 10px;
                    font-weight: bold;
                }
                /deep/ .ivu-tree ul li{
                    margin: 0;
                }
            }
        }
        .dam-section-body {
            width: ~'calc(100vw - 260px)';
            padding: 10px 0 0 10px;
            // display: flex;
            // flex-direction: column;
            .nav-keyword{
                line-height: 30px;
                margin-bottom: 10px;
                min-height: 30px;
                padding-right: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 30px;
                .nav-tag{
                    /deep/ .ivu-tag{
                        border-color: @primary-color;
                        background: @primary-color;
                        .ivu-tag-text{
                            color: #fff;
                        }
                        .ivu-icon-ios-close{
                            color: #fff;
                        }
                    }
                }
                .all-choose{
                    cursor: pointer;
                    font-size: 20px;
                    &:active {
                        opacity: .6;
                    }
                }
                .icon{
                    color: @primary-color;
                    margin-left: 5px;
                    cursor: pointer;
                    font-weight: bold;
                    font-size: 20px;
                    &:active {
                        opacity: .6;
                    }
                }
            }
            .breadCrumb{
                width: 100%;
                line-height: 40px;
                border-top: 1px solid @garyA300;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                .bread-li{
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    .bread-title{
                        margin-right: 10px;
                        cursor: pointer;
                        font-weight: bold;
                        &:hover{
                            opacity: .6;
                        }
                    }
                }
            }
            .file-contant{
                height: ~'calc(100% - 50px)';
                // flex: 1;
                overflow-y: auto;
                padding-top: 30px;
                .file-contant-body{
                    align-self: start;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0 46px;
                    padding-right: 0;
                }
                .no-file{
                    text-align: center;
                    padding-top: 100px;
                    color: #999;
                    .empty-img{
                        width: 70px;
                    }
                }
                .file-ul{
                    width: 240px;
                   .file-name{
                       padding: 0 20px;
                       white-space: nowrap;
                       overflow:hidden;
                       text-overflow: ellipsis;
                       color: @primary-color;
                       background: #fff;
                       line-height: 30px;
                       background: #f5f5f5;
                       width: 240px;
                   } 
                   margin-right: 20px;
                   margin-bottom: 20px;
                   cursor: pointer;
                   border: 1px solid #ccc;
                   padding-top: 10px;
                   position: relative;   
                   .image-hover{
                       width: 300px;
                       position: absolute;
                       z-index: 2;
                       left: 210px;
                       top: 20px;
                       display: none;
                    //    transition: all .5s;
                    //    opacity: 0;
                    .default-img{
                        width: 100%;
                    }
                   }
                   &:hover {
                    box-shadow:5px 5px 5px rgba(0,0,0, .1),5px -5px 5px rgba(0,0,0, .1),-5px 5px 5px rgba(0,0,0, .1),-5px -5px 5px rgba(0,0,0, .1);
                    .image-hover{ 
                        display: block;
                        // opacity: 1;
                    }   
                }
                }
                .file-item{
                    width: 220px;
                    height: 220px;
                    margin: 0 10px 10px;
                    background: url(../../assets/images/file.png) no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 20px;
                    .file-img-box{
                        background: #5b6684;
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        border-top-right-radius: 10px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        .img-show{
                            background: #525c77;
                            width: 100%;
                            height: 100%;
                            border-radius: 5px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                    .default-img{
                        max-height: 100%;
                        max-width: 100%;
                    }
                }
            }
            .file-item-children {
                border: 1px solid @primary-color;
                width: 220px;
                height: 220px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                margin: 0 auto 10px;
                .hover-image{
                    position: absolute;
                    right: -210px;
                    top: 50%;
                    width: 200px;
                    display: none;
                    z-index: 99;
                }
                .default-img{
                    max-height: 100%;
                    max-width: 100%; 
                }
                .play-video{
                    position: absolute;
                    width: 30px;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background: rgba(255, 255, 2555, .7);
                    z-index: 1;
                    .play-video-icon{
                        width: 100%;
                    }
                }
                .source-btn{
                    position: absolute;
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: @primary-color;
                    color: #fff;
                    padding: 1px 5px;
                    cursor: pointer;
                    display: none;
                }
                .cam-more-btn{
                    position: absolute;
                    top: 0px;
                    left: 0;
                    z-index: 2;
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                &:hover {
                    .source-btn {
                        display: block;
                    } 
                }
            }
        }
    }

}
.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 50px;
    .download-icon{
        color: @primary-color;
        font-size: 20px;
        cursor: pointer;
    }
}
.modal-source{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .modal-left{
        flex: 1;
        border: 1px solid @primary-color;
        height: ~"calc(100% - 60px)";
        position: relative;
        .btn_nav{
            position: absolute;
            top: 45%;
            z-index: 1;
            width: 80px;
            cursor: pointer;
            animation: scale 3s infinite linear;
            img{
                width: 100%;
            }
        }
        .pre{
            left: -20px;
        }
        .next{
            right: -20px;
        }
        .default-img{
            max-width: 100%;
            max-height: 100%;
        }
        .modal-video{
            width: 100%;
            height: 100%;
        }
        .img-item{
            width: 100%;
            height: 100%; 
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .video-item{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .pdf-item {
            width: 100%;
            height: 100%; 
            overflow-y: auto;
        }
    }
    .modal-right{
        padding: 20px 0;
        padding-left: 20px;
        height: ~"calc(100% - 100px)";
        overflow-y: auto;
        width: 25%;
        .title{
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /deep/ .ivu-form-item{
            margin-bottom: 0;
            .ivu-form-item-label{
                font-weight: bold;
            }
            .ivu-form-item-content{
                font-size: 12px;
            }
        }
        .ip-box{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30px;
            .ip-item{
                padding: 0 15px;
                border: 1px solid #ccc;
                line-height: 30px;
                font-size: 12px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
    }
}
.img-cover{
    position: fixed;
    z-index: 2;
    width: 200px;
    height: 300px;
    background: #525c77;
}
/deep/ .ivu-icon-ios-loading:before {
    content: "";
}
@keyframes scale {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}